<template>
  <div
    class="column no-wrap audio-panel-item justify-around items-center q-pa-sm"
  >
    <q-avatar
      @click="changeCurrntAudio"
      @mouseover="isHover = true"
      @mouseout="isHover = false"
    >
      <q-img :src="audio!.creatorAvatar">
        <div
          v-if="currentAudio.id === audio.id && isPlaying"
          style="padding: 0"
          class="absolute-full text-subtitle2 flex flex-center"
          no-pointer-events
        >
          <q-icon name="mdi-pause" style="font-size: 24px" />
        </div>
        <div
          v-else
          style="padding: 0"
          class="absolute-full text-subtitle2 flex flex-center"
          v-show="isHover"
          no-pointer-events
        >
          <q-icon name="mdi-play" style="font-size: 24px" />
        </div>
      </q-img>
    </q-avatar>
    <q-chip
      class="chip"
      square
      size="10px"
      text-color="accent"
      v-if="audio!.isOriginal"
      >ORIGINAL</q-chip
    >
    <h-icon-num icon="mdi-star" :label="audio!.starCount" />
    <lang-chip :code="audio!.langCode" />
  </div>
</template>
<script setup lang="ts">
import { ref, PropType, computed } from 'vue';
import Audio from 'src/models/Audio';
import HIconNum from '../utils/HIconNum.vue';
import LangChip from '../LanguageChip.vue';
import { useVideoStore } from 'src/stores/video-store';
const props = defineProps({
  audio: {
    type: Object as PropType<Audio>,
    required: true,
  },
});
const videoStore = useVideoStore();
const currentAudio = computed(() => videoStore.currentAudio);
const isPlaying = computed<boolean>(() => videoStore.isPlaying);
const isHover = ref(false);
function changeCurrntAudio() {
  if (currentAudio.value!.id !== props.audio.id) {
    videoStore.setCurrentAudio(props.audio);
  } else {
    if (isPlaying.value) {
      videoStore.pauseCurrentVideo();
    } else {
      videoStore.playCurrentVideo();
    }
  }
}
</script>
<style lang="sass" scoped>

.audio-panel-item
  background-color: #242424
  width: 88px
  max-height: 133px
  .chip
    padding: 0px 6px
    cursor: default
    margin: 0px
    height: 18px
</style>
